<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #change,
    #ytb {
        margin: 0;
        padding: 0;
    }

    #change li {
        list-style-type: none;
    }

    #ytb tr th a {
        text-decoration: none;
        color: rgb(17, 223, 255);
    }

    #change,
    #ytb {
        width: 500px;
        height: 25px;
        margin: 0 auto;
        clear: both;
    }

    /*背景样式设置*/

    #change li {
        float: left;
        margin: 10px 10px 10px 0;
        width: 5px;
        height: 5px;
        border-width: 5px;
        border-style: solid;
    }

    #red {
        border-color: red;
        background: red;
    }

    #green {
        border: green;
        background: green;
    }

    #pink {
        border: pink;
        background: pink;
    }

    #black {
        border: black;
        background: black;
    }

    #change li.current {
        background: #fff !important;
    }

    /*标题样式设置*/
    #ytb {
        border-collapse: collapse;
    }

    #ytb tr th {
        border: 1px #000 solid;
        font-size: 11px;
    }

    #ytb tr th a:hover {
        text-decoration: underline;
    }
</style>

<body id="bd">
    <ul id="change">
        <li id="yellow" title="黄色"></li>
        <li id="green" title="绿色" name="current"></li>
        <li id="pink" title="粉色"></li>
    </ul>
    <table id="ytb">
        <tr>
            <th><a href="#">新闻</a></th>
            <th><a href="#">娱乐</a></th>
            <th><a href="#">体育</a></th>
            <th><a href="#">电影</a></th>
            <th><a href="#">音乐</a></th>
            <th><a href="#">旅游</a></th>
        </tr>
    </table>

</body>
<script>
    function changeBg(elem, attr, value) {
        elem.style[attr] = value;
    }
    window.onload = function () {
        var oLi = document.getElementsByTagName("li");
        var oBd = document.getElementById("bd");
        var oTb = document.getElementById("ytb");
        var oAtt = ["background"];
        /*背景色变化值*/
        var oBdBg = ["yellow", "green", "pink"];
        var oTbBg = ["yellow", "green", "pink"];

        /*背景切换功能*/
        for (var i = 0; i < oLi.length; i++) {
            oLi[i].index = i;
            oLi[i].onclick = function () {
                for (var x in oLi) oLi[x].className = "";
                this.className = "current";

                if (this.index == oLi.length - 1) {
                    changeBg(oBd, oAtt[0], oBdBg[2]);
                    changeBg(oTb, oAtt[0], oTbBg[2]);
                } else {
                    changeBg(oBd, oAtt[0], oBdBg[this.index]);
                    changeBg(oTb, oAtt[0], oTbBg[this.index]);
                }
            }
        }
    }
</script>

</html>